<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="医院名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入医院名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="医院地址" prop="address">
        <el-input v-model="queryParams.address" placeholder="请输入医院地址" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="医院电话" prop="phone">
        <el-input v-model="queryParams.phone" placeholder="请输入医院联系电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="医院等级" prop="level">
        <el-select v-model="queryParams.level" placeholder="请选择医院等级" clearable>
          <el-option v-for="dict in dict.type.hospital_level" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['hospital:hospital:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['hospital:hospital:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['hospital:hospital:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['hospital:hospital:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="hospitalList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="医院ID" align="center" prop="id" />
      <el-table-column label="医院名称" align="center" prop="name" />
      <el-table-column label="医院地址" align="center" prop="address" />
      <el-table-column label="医院头像URL" align="center" prop="avatar" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.avatar" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="医院联系电话" align="center" prop="phone" />
      <el-table-column label="医院等级" align="center" prop="level">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hospital_level" :value="scope.row.level" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['hospital:hospital:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['hospital:hospital:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改医院管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="医院名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入医院名称" />
        </el-form-item>
        <el-form-item label="医院地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入医院地址" />
        </el-form-item>
        <el-form-item label="医院描述" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="医院头像URL" prop="avatar">
          <image-upload v-model="form.avatar" />
        </el-form-item>
        <!-- ▼▼▼ 新增的经纬度字段 ▼▼▼ -->
        <el-form-item label="地理位置" prop="location">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-input v-model="form.longitude" placeholder="经度(如116.404)" clearable>
                <template slot="append">°E</template>
              </el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="form.latitude" placeholder="纬度(如39.915)" clearable>
                <template slot="append">°N</template>
              </el-input>
            </el-col>
          </el-row>
          <div style="font-size:12px;color:#888;margin-top:5px;">
            <el-link type="primary" :underline="false" @click="openMapPicker">
              <i class="el-icon-map-location"></i> 地图拾取坐标
            </el-link>
          </div>
        </el-form-item>
        <!-- ▲▲▲ 新增的经纬度字段 ▲▲▲ -->
        <el-form-item label="医院联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入医院联系电话" />
        </el-form-item>
        <el-form-item label="医院等级" prop="level">
          <el-select v-model="form.level" placeholder="请选择医院等级">
            <el-option v-for="dict in dict.type.hospital_level" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="删除标记" prop="del">
          <el-select v-model="form.del" placeholder="请选择删除标记">
            <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择医院位置" :visible.sync="mapDialogVisible" width="800px" append-to-body>
      <div id="map-container" style="height: 500px;"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mapDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmLocation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listHospital,
    getHospital,
    delHospital,
    addHospital,
    updateHospital
  } from "@/api/hospital/hospital"

  export default {
    name: "Hospital",
    dicts: ['sys_normal_disable', 'hospital_level'],
    data() {
      return {

        mapDialogVisible: false, // 控制地图弹窗显示
        tempPosition: null, // 临时存储选择的坐标
        map: null, // 地图实例
        marker: null, // 地图标记点
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 医院管理表格数据
        hospitalList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          address: null,
          description: null,
          avatar: null,
          phone: null,
          level: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "医院名称不能为空",
            trigger: "blur"
          }],
          level: [{
            required: true,
            message: "医院等级",
            trigger: "change"
          }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询医院管理列表 */
      getList() {
        this.loading = true
        listHospital(this.queryParams).then(response => {
          this.hospitalList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          address: null,
          description: null,
          avatar: null,
          phone: null,
          level: null,
          del: null
        }
        this.resetForm("form")
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm")
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = "添加医院管理"
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const id = row.id || this.ids
        getHospital(id).then(response => {
          this.form = response.data
          this.open = true
          this.title = "修改医院管理"
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateHospital(this.form).then(response => {
                this.$modal.msgSuccess("修改成功")
                this.open = false
                this.getList()
              })
            } else {
              addHospital(this.form).then(response => {
                this.$modal.msgSuccess("新增成功")
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids
        this.$modal.confirm('是否确认删除医院管理编号为"' + ids + '"的数据项？').then(function() {
          return delHospital(ids)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess("删除成功")
        }).catch(() => {})
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('hospital/hospital/export', {
          ...this.queryParams
        }, `hospital_${new Date().getTime()}.xlsx`)
      },
      async openMapPicker() {
            this.mapDialogVisible = true;
            try {
              await this.loadAMapScript();
              this.$nextTick(() => {
                this.initMap();
              });
            } catch (error) {
              this.$modal.msgError('地图加载失败: ' + error.message);
              this.mapDialogVisible = false;
            }
          },

          /** 加载高德地图JS */
          loadAMapScript() {
            return new Promise((resolve, reject) => {
              if (window.AMap) return resolve();
              if (this.amapScriptLoading) return reject(new Error('地图正在加载中'));

              this.amapScriptLoading = true;
              const script = document.createElement('script');
              script.src = `https://webapi.amap.com/maps?v=2.0&key=${process.env.VUE_APP_AMAP_KEY}`;

              script.onload = () => {
                // 加载UI组件库
                const uiScript = document.createElement('script');
                uiScript.src = 'https://webapi.amap.com/ui/1.1/main.js';
                uiScript.onload = () => {
                  this.amapScriptLoading = false;
                  resolve();
                };
                uiScript.onerror = () => {
                  this.amapScriptLoading = false;
                  reject(new Error('UI组件加载失败'));
                };
                document.head.appendChild(uiScript);
              };

              script.onerror = () => {
                this.amapScriptLoading = false;
                reject(new Error('地图JS加载失败'));
              };

              document.head.appendChild(script);
            });
          },

          /** 初始化地图 */
          initMap() {
            try {
              if (!window.AMap) throw new Error('AMap SDK未加载');

              // 销毁旧地图实例
              if (this.map) {
                this.map.destroy();
                this.map = null;
              }

              this.map = new AMap.Map('map-container', {
                zoom: 15,
                viewMode: '2D',
                center: this.getMapCenter()
              });

              // 添加控件
              this.map.addControl(new AMap.ToolBar());
              this.map.addControl(new AMap.Scale());

              // 初始化标记
              if (this.form.longitude && this.form.latitude) {
                this.addMarker([this.form.longitude, this.form.latitude]);
              }

              // 绑定点击事件
              this.map.on('click', (e) => {
                this.tempPosition = {
                  longitude: e.lnglat.getLng(),
                  latitude: e.lnglat.getLat()
                };
                this.addMarker([e.lnglat.getLng(), e.lnglat.getLat()]);
              });

            } catch (error) {
              throw new Error(`地图初始化失败: ${error.message}`);
            }
          },

          /** 添加标记 */
          addMarker(position) {
            if (this.marker) {
              this.marker.setPosition(position);
            } else {
              this.marker = new AMap.Marker({
                position: position,
                map: this.map
              });
            }
            this.map.setCenter(position);
          },

          /** 获取地图中心点 */
          getMapCenter() {
            return this.form.longitude && this.form.latitude
              ? [this.form.longitude, this.form.latitude]
              : [116.397428, 39.90923]; // 默认北京天安门坐标
          },

          /** 确认位置 */
          confirmLocation() {
            if (this.tempPosition) {
              this.form.longitude = this.tempPosition.longitude;
              this.form.latitude = this.tempPosition.latitude;
              this.mapDialogVisible = false;
            } else {
              this.$modal.msgWarning('请先在地图上选择位置');
            }
          },

          /** 重置表单时清除地图相关数据 */
          reset() {
            // 原有重置逻辑...
            this.tempPosition = null;
          }
        },
        beforeDestroy() {
          // 组件销毁时清理地图
          if (this.map) {
            this.map.destroy();
            this.map = null;
          }
        }
  }
</script>
<style scoped>
  /* 原有样式保持不变 */

  /* ▼▼▼ 新增地图相关样式 ▼▼▼ */
  #map-container {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }

  /* 地图弹窗按钮调整 */
  .map-dialog-footer {
    text-align: right;
    padding: 10px 20px 0;
  }

  /* ▲▲▲ 新增地图相关样式 ▲▲▲ */
</style>
